<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kafka 主题管理</title>

    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />

    <link rel="stylesheet" href="../../plugins/icheck/custom.css" />
    <link rel="stylesheet" href="../../plugins/jsonview/jquery.jsonview.min.css" />
    <link rel="stylesheet" href="../../plugins/jsoneditor/jsoneditor.min.css" />

        <style>
        .list-group-item{
            cursor: pointer;
        }
        .checkbox-inline{
            margin-left: 0 !important;
        }
        .custom-input{
            border: 1px solid #c6cede;
            background-color: #fff;
            height: 30px;
            line-height: 30px;
            padding: 0px 5px;
        }
        .form-group-sm select.form-control {
            line-height: inherit;
        }
            .list-group#topics{
                height: 86vh;
                overflow-y: scroll;
            }
            #consumerDialog table.messages>td{
                word-break: break-all;
            }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header" id="adminconn">
            <a class="navbar-brand"><span conn=""></span> 主题管理 </a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-5">
            <div class="panel panel-default">
                <div class="panel-heading">主题列表
                    <a href="javascript:void(0);" class="pull-right padding-right" id="createTopic">
                        <i class="fa fa-plus"></i> 创建主题
                    </a>
                </div>
                <div class="list-group" id="topics">
                </div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="panel panel-default">
                <div class="panel-heading" ><span id="topicname">.</span></div>
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#profile" data-toggle="tab">属性列表</a></li>
                        <li  class="" ><a href="#data" data-toggle="tab">数据模拟</a></li>
                        <li  class="" ><a href="#datajson" data-toggle="tab">JSON 数据模拟</a></li>
                    </ul>

                    <div class="tab-content padding-top">
                        <div class="active tab-pane" id="profile">
                            <button class="bn btn-link text-primary" id="monitor"><i class="fa fa-ambulance"></i> 监控 </button>
                            <button class="btn btn-link text-forestgreen" id="consumer"><i class="fa fa-play"></i> 消费数据</button> |
                            <button class="btn btn-link text-danger" title="重量级搜索,勿经常使用" id="allPartitionDatas"><i class="fa fa-search"></i></button> |
                            <button class="btn btn-link" id="refreshlogsize"><i class="fa fa-refresh"></i></button> <time class="refresh"></time>
                            <table class="table table-bordered table-striped table-hover" id="topicdetail">
                                <thead>
                                <tr>
                                    <td>partition</td>
                                    <td>logSize</td>
                                    <td>change</td>
                                    <td>查看数据</td>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>

                        </div>
                        <div class="tab-pane" id="data">
                            <div >
                                <div class="form-group">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" checked  > 全选
                                    </label>
                                    <input type="text" name="dataSize" class="custom-input margin-left" value="1000" size="10" placeholder="数据量">
                                    <button class="btn btn-sm btn-primary" id="createdata"> <i class="fa fa-magic"></i> 生成数据</button>
                                </div>
                                <div class="form-group" id="partitionlist">

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane " id="datajson">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-xs-2 control-label" >发送分区</label>
                                    <div class="col-xs-10">
                                        <input type="text" name="partition" class="form-control" placeholder="数据发到哪个分区,不填表示随机分配">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label" >JSON 数据</label>
                                    <div class="col-xs-10">
                                        <textarea id="jsondata" class="form-control autoHeight " style="min-height: 200px" ></textarea>
                                        <div class="button-group margin-top">
                                            <button class="btn btn-sm btn-primary" id="sendData"><i class="fa  fa-send"></i> 发送数据 </button>
                                            <button class="btn btn-sm btn-info" id="validJson"><i class="fa fa-legal"></i> 验证 json </button>
                                            <button class="btn btn-sm btn-white" id="compactJson"><i class="fa fa-paragraph"></i> 解析到 json 数据 </button>
                                        </div>

                                        <div id="jsondataformat" class="margin-top"></div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--消费数据弹框-->
<div class="open-dialog" id="consumerDialog">
    <div class="btn-group btn-group-sm">
        <button class="btn btn-link text-forestgreen" name="play"> <i class="fa fa-play"></i> 开始</button>
        <button class="btn btn-link text-danger" disabled name="pause"> <i class="fa fa-pause"></i> 暂停</button>
    </div>
    <div class="consumer-settions row" id="settings">
        <div class="col-xs-5">
            <select  class="form-control" name="serializables"></select>
        </div>
        <div class="col-xs-5">
            <select  class="form-control" name="classloaders"></select>
        </div>

    </div>
    <div class="row">
       <table class="messages table table-striped table-bordered table-hover padding">
           <thead>
           <tr>
               <td>offset</td>
               <td>partition</td>
               <td>timestamp</td>
               <td>value</td>
           </tr>
           </thead>
           <tbody>

           </tbody>
       </table>
    </div>

</div>

<!-- 监控数据 -->
<div class="open-dialog" id="topicMonitor">
    <div class="btn-group btn-group-sm">
        <button name="refresh" class="btn btn-link"><i class="fa fa-refresh"></i></button>
    </div>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>key</th>
            <th>实时比率</th>
            <th>每分钟</th>
            <th>每五分钟</th>
            <th>每十五分钟</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>


<!--数据展示对话框-->
<div class="open-dialog" id="showdataDialog">
    <div class="col-xs-12">
        <form class="form-horizontal">
            <div class="form-group form-group-sm" >
                <label class=" col-xs-3 col-lg-2 control-label" >序列化:</label>
                <div class="col-xs-7 col-lg-6">
                    <select name="" class="form-control" id="serializeTools"></select>
                </div>
            </div>
            <div class="form-group-sm form-group">
                <table class="table table-striped table-bordered table-hover" id="datadetail">
                    <thead>
                    <tr>
                        <td>操作</td>
                        <td>分区</td>
                        <td width="10">偏移量</td>
                        <td width="30">数据时间</td>
                        <td>数据</td>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </form>
    </div>
</div>

<!--以 json 形式查看对话框 -->
<div class="open-dialog" id="jsonView">
    <div id="jsonViewLoad"></div>
</div>

<!-- 创建主题 -->
<div class="open-dialog" id="createTopicDialog">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-3  ">主题名:</label>
            <div class="col-sm-9">
                <input type="text" name="topic"  class="form-control" placeholder="主题名" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-3 ">分区数:</label>
            <div class="col-sm-9">
                <input type="text" name="partitions"  class="form-control" placeholder="分区数" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-3 ">副本数:</label>
            <div class="col-sm-9">
                <input type="text" name="replication"  class="form-control" placeholder="副本数" />
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    require([ 'bootstrap', 'kafka/admin' ]);
</script>
</body>
</html>